<script setup lang="ts">
import { api } from '@/api/api'
import router from '@/router'
import type { Equipment } from '@/types/EquipmentType'
import { computed, onBeforeMount, ref } from 'vue'
import { useSEquipmentstore } from '@/stores/INeedEquipmentStore'

const searchKeyword = ref('')
const equipmentStore = useSEquipmentstore()

const allTableData = ref<Equipment[]>([])
var count: number
count = allTableData.value.length

onBeforeMount(() => {
  api.getAllEquipment().then((resp) => {
    allTableData.value = resp
    count = allTableData.value.length
  })
})

const filteredData = computed(() => {
  return allTableData.value.filter((item) => {
    return (
      item.equipNo.includes(searchKeyword.value) ||
      item.name.includes(searchKeyword.value) ||
      item.level.includes(searchKeyword.value) ||
      item.scope.includes(searchKeyword.value) ||
      item.traceMethod.includes(searchKeyword.value) ||
      item.source.includes(searchKeyword.value) ||
      item.addYear.toString().includes(searchKeyword.value)
    )
  })
})

var tableData = computed(() => {
  let result = filteredData.value.slice(
    (currentPage.value - 1) * currentSize.value,
    currentPage.value * currentSize.value
  )
  return result
})
const currentPage = ref(1)
const currentSize = ref(10)

function toInfo(_id: number) {
  router.push({
    name: 'editEquipment',
    params: { id: _id }
  })
  let s: any = {}
  equipmentStore.equipment =
    allTableData.value.find((x) => {
      return x.id == _id
    }) ?? s
}

const currentChange = (page: number) => {
  currentPage.value = page
}

const sizeChange = (size: number) => {
  currentSize.value = size
}
</script>

<template>
  <div class="cnt">
    <h3>共计{{ count }}个设备</h3>
  </div>
  <div>
    <el-input
      v-model="searchKeyword"
      type="text"
      placeholder="请输入内容"
      class="searchbar"
    ></el-input>
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column type="index"></el-table-column>
      <el-table-column prop="equipNo" label="仪器设备编号"> </el-table-column>
      <el-table-column prop="name" label="名称"> </el-table-column>
      <el-table-column prop="level" label="型号/规格/等级"> </el-table-column>
      <el-table-column prop="scope" label="测量范围"> </el-table-column>
      <el-table-column prop="addYear" label="设备购买年份"> </el-table-column>
      <el-table-column prop="traceMethod" label="溯源方式"> </el-table-column>
      <el-table-column prop="validDate" label="有效截止日期"> </el-table-column>
      <el-table-column prop="source" label="设备来源"> </el-table-column>
      <el-table-column label="">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="toInfo(scope.row.id)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div class="pager">
    <el-pagination
      @size-change="sizeChange"
      @current-change="currentChange"
      :current-page="currentPage"
      :page-size="currentSize"
      :background="true"
      layout="prev, pager, next, jumper"
      :total="count"
      :hide-on-single-page="true"
    />
  </div>
</template>

<style>
.searchbar {
  margin-top: 200px;
  margin-left: 50px;
  width: 50vw;
}

.pager {
  margin-left: 100px;
  margin-top: 50px;
}

.cnt {
  margin-top: -100px;
  background-color: aquamarine;
}
</style>
